<template>
  <header class="header">
    <div class="header-left">
      <!-- Logo -->
      <div class="logo">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="#0074D9">
          <path d="M12 2L2 7l10 5 10-5-10-5z" />
          <path d="M2 17l10 5 10-5" />
          <path d="M2 12l10 5 10-5" />
        </svg>
        <span>小罗网盘</span>
      </div>
    </div>
    
    <div class="header-center">
      <!-- 搜索框 -->
      <div class="search-box">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="2" class="search-icon">
          <circle cx="11" cy="11" r="8"></circle>
          <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
        </svg>
        <input type="text" placeholder="搜索文件、文件夹..." class="search-input" @keyup="handleSearch" />
      </div>
    </div>
    
    <div class="header-right">
      <!-- 通知图标 -->
      <div class="notification" @click="handleNotificationClick">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2">
          <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
          <path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
        </svg>
      </div>
      
      <!-- 用户信息 -->
      <div class="user-info" @click="handleUserInfoClick">
        <div class="avatar" v-if="userInfo.avatar">
          <img :src="userInfo.avatar" :alt="userInfo.nickname || userInfo.username" />
        </div>
        <div class="avatar" v-else>
          <span>{{ (userInfo.nickname || userInfo.username).charAt(0).toUpperCase() }}</span>
        </div>
        <span class="username">{{ userInfo.nickname || userInfo.username }}</span>
      </div>
    </div>
  </header>
</template>

<script>
export default {
  name: 'Header',
  data() {
    return {
      userInfo: {
        username: '张三',
        nickname: '',
        avatar: ''
      }
    }
  },
  mounted() {
    this.loadUserInfo()
  },
  methods: {
    loadUserInfo() {
      const storedUser = localStorage.getItem('user')
      if (storedUser) {
        try {
          const user = JSON.parse(storedUser)
          this.userInfo = {
            username: user.username || '',
            nickname: user.nickname || '',
            avatar: user.avatar ? user.avatar.trim() : ''
          }
        } catch (error) {
          console.error('解析用户信息失败:', error)
        }
      }
    },
    handleNotificationClick() {
      console.log('点击了通知图标')
      // 这里可以添加实际的通知逻辑，例如显示通知列表
    },
    handleUserInfoClick() {
      console.log('点击了用户信息，跳转到个人中心')
      this.$router.push('/profile')
    },
    handleSearch(event) {
      if (event.key === 'Enter') {
        const searchText = event.target.value.trim()
        if (searchText) {
          console.log(`搜索内容: ${searchText}`)
          // 这里可以添加实际的搜索逻辑
        }
      }
    }
  }
}
</script>

<style scoped>
.header {
  height: 60px;
  background-color: white;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

.header-left {
  display: flex;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.header-center {
  flex: 1;
  max-width: 500px;
  margin: 0 40px;
}

.search-box {
  position: relative;
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 20px;
  padding: 0 16px;
  height: 36px;
}

.search-icon {
  margin-right: 8px;
}

.search-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-size: 14px;
  color: #333;
}

.search-input::placeholder {
  color: #999;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 24px;
}

.notification {
  cursor: pointer;
  padding: 4px;
  position: relative;
}

.notification:hover {
  color: #0074D9;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #0074D9;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.username {
  font-size: 14px;
  color: #333;
}
</style>